let React = require('react');
let ex = require('classnames');

module.exports = React.createClass({
	render(){
		let tool = this.props.tool;
		return(
			<div>
				<ul className={ex("tools-draw-list", "start-xs", "middle-xs")}>
						<li className={ex("tools-draw-item", "start-xs", 'middle-xs', {"onActive": this.props.toolActived.parent == tool.parent.name})} onClick={()=>{this.props._handleToolsChange({parent: tool.parent.name})}}>
							<span><i className={ex("big-icon", tool.parent.icon)}></i>{tool.parent.text}</span>
						</li>
		                {
		                	this.props.toolActived.parent == tool.parent.name ?
		                	<ul className="tools-draw-detail center-xs">
								{tool.sub.map((sub)=>{
									return(
										<li className={ex("tools-draw-item", "start-xs", 'middle-xs', {onActive: this.props.toolActived.sub == sub.name})} onClick={()=>{this.props._handleToolsChange({parent: tool.parent.name, sub: sub.name})}}>
											<span><i className={ex("small-icon", sub.icon)}></i>{sub.text}</span>
										</li>
									);
								})}
		                	</ul>
		                	:
		                	null
		                }
				</ul>
			</div>
		);
	}
});